<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>风向分布</title>
    <script src="../echarts.min.js"></script>
    <script src="../lodash.min.js"></script>
    <style>
        .flex{
            display: flex;
        }
    </style>
</head>
<body style="background:#0B0D39">
    <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="main1" style="width: 100%; height: 500px"></div>
    <!-- <div id="mainr" style="width: 50%; height: 500px"></div> -->
    

    <script>
        // 指定图标的配置项和数据
        let option = {
            textStyle: {
                color: '#fff'
            },
            polar: {},
            // 极坐标系的角度轴
            angleAxis: {
                // show: false, //是否显示坐标轴刻度。
                // min: 0,
                // max: 360,
                // interval: 30,
                alignWithLabel:true,           //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
                type: 'category',
                data: ['N', '', '', '', 'E', '', '', '', 'S','', '','','W', '','', ''],
                // data: ['0', '30', '60', '90', '120', '150', '180','210', '240', '270', '300', '330'],
                boundaryGap: false,
            　　axisLine: { //坐标轴轴线设置
            　　　　lineStyle: {
            　　　　　　color: 'blue'
            　　　　}
            　　},
            // 　　axisTick: { //坐标轴刻度设置
            // 　　　　show: true,
            // 　　},
            　　splitLine: { //分割线设置
            　　　　show: true,
                    lineStyle: {
                        color: 'blue',
                        opacity: 0.5
                    }
                    
            　　},
            　　axisLabel: { //刻度标签设置
                    margin: 12,
            　　　　textStyle: {
                        fontSize: 14,       
            // 　　　　　　color: 'pink'
            // 　　　　　　color: 'transparent'
            　　　　},
            　　}
            },
            // 极坐标系的径向轴
            radiusAxis: {
                type: 'value',
                // name: 'N',
                // nameLocation: 'end',
                // boundaryGap: ['70%', '70%'],
                // min: 0,
                // max: 10,
                // interval: 2,
            //     axisLine: { //坐标轴轴线设置
            // // 　　　　show: false,
            // 　　　　 lineStyle: {
            // 　　　　 	color: "red",
                        
            //         }
            // 　　},
            　　axisTick: { //坐标轴刻度设置
            　　　　show: false
            　　},
            　　axisLabel: { //刻度标签设置
            // 　　　　margin: 0, //刻度与坐标轴之间的距离
            // 　　　　textStyle: {
            // 　　　　　　color: 'blue'
            // 　　　　}
                        formatter: function (value, index) { //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
                        return value+"%";
                    },
            　　},
                splitLine: {
                    // show: false,
                    lineStyle: {
                        color: 'blue',
                        type: 'dashed'
                    }
                },
                axisLine:{                      //坐标 轴线
                    show:true,                  //是否显示坐标轴轴线
                //     onZero:false,                //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
                //     lineStyle:{
                //         color:"#333",               //颜色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支持线性渐变，径向渐变，纹理填充
                //         shadowColor:"red",          //阴影颜色
                //         shadowOffsetX:0,            //阴影水平方向上的偏移距离。
                //         shadowOffsetY:0,            //阴影垂直方向上的偏移距离
                //         shadowBlur:10,              //图形阴影的模糊大小。
                //         type:"solid",               //坐标轴线线的类型，solid，dashed，dotted
                //         width:1,                    //坐标轴线线宽
                //         opacity:1,                  //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
                //     }
                },
            },
            series: [
                {
                    name:'1#',
                    type: 'bar',
                    barWidth: 200,
                    data:[2, 2, 5, 4, 3, 5, 1, 6, 7, 8, 9, 12],
                    coordinateSystem: 'polar',
                    itemStyle:{
                        normal:{
                            color:'rgba(64,158,255,0.7)'
                        }
                        
                    }
                }
            ]
        };
        // 基于准备好的DOM，初始化echarts实例
        var chart1 = echarts.init(document.getElementById('main1'));


        // 使用刚指定的配置项和数据显示图表
        chart1.setOption(option)
    </script>
</body>
</html>